<template>

  <Layout style="height: 100%" class="main">

    <Sider hide-trigger collapsible :width="256" :collapsed-width="64" v-model="collapsed" class="left-sider" :style="{overflow: 'hidden'}">
      <div class="sidebar-brand" @click="goHome" v-if="!collapsed">
        <img style="width:50px" :src="sysFormModel.logoUrl" />
        <span class="ml10">{{sysFormModel.title}}</span>
      </div>

      <side-menu class="mt30" theme="dark" ref="sideMenu" :active-name="$route.name" :collapsed="collapsed" @on-select="turnToPage" :menu-list="menuList"> </side-menu>
    </Sider>

    <Content class="main-content-con">
      <Layout class="main-layout-con">

        <Header>
          <headerBar class="header-con" @on-coll-change="collpasedChange" :collapsed="collapsed">
            <user :userName="userName" :user-avator="userAvator" />
          </headerBar>
        </Header>
        <Layout>
          <Content class="content-wrapper">

            <router-view />
            <loadFlower> </loadFlower>
            <ABackTop :height="100" :bottom="80" :right="50" container=".content-wrapper"></ABackTop>
          </Content>
        </Layout>
      </Layout>
    </Content>
  </Layout>

</template>
<script>
const { title } = require('../../config')
import SideMenu from './components/side-menu'
import HeaderBar from './components/header-bar'

import User from './components/user'
import ABackTop from './components/a-back-top'
import Fullscreen from './components/fullscreen'
import Language from './components/language'
import { mapGetters } from 'vuex'
import headerBar from './components/header-bar'
import loadFlower from '../load-flower/index'
import './main.less'

export default {
  name: 'Main',
  components: {
    SideMenu,
    HeaderBar,
    Language,

    Fullscreen,
    User,
    ABackTop,
    loadFlower,
    headerBar,
  },
  data() {
    return {
      title,
      collapsed: false,
      isFullscreen: false,
    }
  },
  computed: {
    ...mapGetters({
      sysFormModel: 'sysFormModel',
      menuList: 'menuList',
      tagRouter: 'tagRouter',
      userName: 'userName',
      userAvator: 'avatorImgPath',
    }),
    cacheList() {
      return ['ParentView']
    },
  },
  watch: {},

  created() {
    this.init()
  },
  methods: {
    async init() {
      await this.$store.dispatch('getSysTitle')
    },
    collpasedChange(collapsed) {
      this.collapsed = collapsed
    },
    goHome() {
      this.$router.push({ path: '/' })
    },
    turnToPage(route) {
      let { name, params, query } = {}
      if (typeof route === 'string') name = route
      else {
        name = route.name
        params = route.params
        query = route.query
      }
      if (name.indexOf('isTurnByHref_') > -1) {
        window.open(name.split('_')[1])
        return
      }
      this.$router.push({
        name,
        params,
        query,
      })
    },
    handleCollapsedChange(state) {
      this.collapsed = state
    },

    handleClick(item) {
      this.turnToPage(item)
    },
  },
}
</script>
<style lang="less" scoped>
.shop-select {
  z-index: 999999;
}

.sidebar-brand {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  text-align: center;
  height: 60px;
  line-height: 25px;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
}
</style>
